<style lang="less">
    @import '../../../styles/loading.less';
</style>

<template>
    <div>
        <Card shadow>
            <textarea ref='tinyet' class='tinymce-textarea' id="tinymceEditer"></textarea>
        </Card>
        <Spin fix v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>加载组件中...</div>
        </Spin>
    </div>
</template>

<script>
import tinymce from 'tinymce';
import axios from 'axios';
export default {
    name: 'text-editor',
    props: {
        eid: {
            default: 'tinymceEditer',
            type: String
        },
        defaultContent: {
            default: '',
            type: String
        },
        maxSize: {
            default: 2097152,
            type: Number
        }
    },
    data () {
        return {
            spinShow: true,
            accept: ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
        };
    },
    methods: {
        init () {
            let thiss = this;
            this.$nextTick(() => {
                let vm = this;
                // let height = document.body.offsetHeight - 300;
                tinymce.init({
                    selector: '#tinymceEditer',
                    theme: 'modern',
                    branding: false,
                    elementpath: false,
                    height: 400,
                    language: 'zh_CN',
                    menubar: 'edit insert view format table tools',
                    plugins: [
                        'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
                        'searchreplace visualblocks visualchars code fullpage',
                        'insertdatetime media nonbreaking save table contextmenu directionality',
                        'emoticons paste textcolor colorpicker textpattern imagetools codesample'
                    ],
                    toolbar1: ' newnote print preview | undo redo | insert | styleselect | fontselect fontsizeselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
                    autosave_interval: '20s',
                    font_formats: '微软雅黑="微软雅黑";宋体="宋体";黑体="黑体";仿宋="仿宋";楷体="楷体";隶书="隶书";幼圆="幼圆";ClearSans="clear_sansregular",Helvetica,Arial,sans-serif;ClearSans Medium="clear_sans_mediumregula",Helvetica,Arial,sans-serif;ClearSans Light="clear_sans_lightregular",Helvetica,Arial,sans-serif;ClearSans Thin="clear_sans_thinregular",Helvetica,Arial,sans-serif',
                    fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 36pt',
                    forced_root_block: '', // 去除回车自带p标签
                    image_advtab: true,
                    images_upload_url: '/admin/upload/image',
                    table_default_styles: {
                        width: '100%',
                        borderCollapse: 'collapse'
                    },
                    style_formats_merge: true,
                    style_formats: [
                        {title: '单倍行距', inline: 'span', styles: {lineHeight: '1'}},
                        {title: '1.5倍行距', inline: 'span', styles: {lineHeight: '1.5'}},
                        {title: '2倍行距', inline: 'span', styles: {lineHeight: '2'}},
                        {title: '2.5倍行距', inline: 'span', styles: {lineHeight: '2.5'}},
                        {title: '3倍行距', inline: 'span', styles: {lineHeight: '3'}}
                    ],
                    setup: function (editor) {
                        editor.on('init', function (e) {
                            vm.spinShow = false;
                            // if (localStorage.editorContent && thiss.defaultContent.trim() == '') {
                            //     tinymce.get('tinymceEditer').setContent(localStorage.editorContent);
                            // }
                        });
                        editor.on('keydown', function (e) {
                            localStorage.editorContent = tinymce.get('tinymceEditer').getContent();
                        });
                    },
                    images_upload_handler: function (blobInfo, success, failure) {
                        if (blobInfo.blob().size > self.maxSize) {
                            failure('文件体积过大');
                            return;
                        }

                        if (thiss.accept.indexOf(blobInfo.blob().type) === -1) {
                            failure('图片格式错误');
                            return;
                        }
                        let config = {
                            headers: {
                                'Content-Type': 'multipart/form-data',
                                'token': localStorage.getItem('token')
                            }
                        };

                        let formData;
                        formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());

                        axios.post(thiss.$store.state.baseURL + '/upload/image', formData, config)
                            .then(res => {
                                if (res.data.status === '0') {
                                    success(res.data.data);
                                    thiss.$Message.success('上传成功');
                                } else {
                                    failure(res.data.message);
                                    thiss.$Message.error(res.data.message);
                                }
                            })
                            .catch(function (fail) {
                                thiss.$Message.error('系统繁忙，请稍后再试！');
                            });
                    },
                    init_instance_callback: function (editor) {
                        editor.on('Change', function (e) {
                            thiss.$emit('onChange', tinymce.activeEditor.getContent());
                        });
                    }
                });
                if (thiss.defaultContent.trim() !== '') {
                    tinymce.get('tinymceEditer').setContent(thiss.defaultContent);
                    // tinymce.activeEditor.setContent(thiss.defaultContent)
                }
            });
        }
    },
    mounted () {
        this.init();
    },
    destroyed () {
        tinymce.get('tinymceEditer').destroy();
    }
};
</script>

<style>

</style>
